<template>
    <div>
        <div>
            <el-form ref="searchForm" :inline="true" :model="condition.search" label-suffix="" label-width="100px"
                     label-position="left" size="small">
                <el-row>
                    <el-col :span=6>
                        <el-form-item label="企业" prop="workCorpId">
                            <el-select v-model="condition.search.workCorpId" placeholder="请选择企业"
                                       style="width:200px;">
                                <el-option
                                    v-for="item in corps"
                                    :key="item.id"
                                    :label="item.corpName"
                                    :value="item.id">
                                    {{ item.corpName }}
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span=6>
                        <el-form-item label="外部ID" prop="externalUserid">
                            <el-input v-model="condition.search.externalUserid" placeholder="外部ID"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span=6>
                        <el-form-item label="昵称" prop="name">
                            <el-input v-model="condition.search.name" placeholder="昵称"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span=6>
                        <el-form-item label="状态" prop="status">
                            <el-select v-model="condition.search.status" placeholder="状态">
                                <el-option label="主动删除" value="DELETED"></el-option>
                                <el-option label="正常" value="NORMAL"></el-option>
                                <el-option label="被删除" value="BY_DELETED"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span=6>
                        <el-form-item label="类型" prop="type">
                            <el-select v-model="condition.search.type" placeholder="类型">
                                <el-option label="微信用户" value="1"></el-option>
                                <el-option label="企业用户" value="2"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span=6>
                        <el-form-item label="性别" prop="gender">
                            <el-select v-model="condition.search.gender" placeholder="性别">
                                <el-option label="未知" value="0"></el-option>
                                <el-option label="男性" value="1"></el-option>
                                <el-option label="女性" value="2"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span=6>
                        <el-form-item label="添加方式" prop="addWay">
                            <el-select v-model="condition.search.addWay"
                                       placeholder="添加方式">
                                <el-option label="未知来源"
                                           value="0"></el-option>
                                <el-option label="扫描二维码"
                                           value="1"></el-option>
                                <el-option label="搜索手机号"
                                           value="2"></el-option>
                                <el-option label="名片分享"
                                           value="3"></el-option>
                                <el-option label="群聊"
                                           value="4"></el-option>
                                <el-option label="手机通讯录"
                                           value="5"></el-option>
                                <el-option label="微信联系人"
                                           value="6"></el-option>
                                <el-option label="客服人员"
                                           value="8"></el-option>
                                <el-option label="搜索邮箱"
                                           value="9"></el-option>
                                <el-option label="视频号添加"
                                           value="10"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col>
                        <el-form-item>
                            <el-button type="primary" @click="getData">查询</el-button>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="reset">重置</el-button>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="exportExcel">导出</el-button>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="success" @click="sync" v-loading.fullscreen.lock="syncLoading">同步
                            </el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </div>

        <el-table
            id="mainTable"
            size="small"
            :data="tableData"
            v-loading="loading"
            element-loading-text="拼命加载中"
            element-loading-spinner="el-icon-loading"
            element-loading-background="rgba(0, 0, 0, 0.8)"
            header-cell-class-name="tableHeaderStyle"
            :cell-style="cellStyle"
            :row-class-name="tableRowClassName">
            <el-table-column label="序号" width="60">
                <template v-slot="scope">
                    <span>{{ (condition.page - 1) * condition.rows + scope.$index + 1 }}</span>
                </template>
            </el-table-column>
            <el-table-column
                prop="name"
                label="昵称">
            </el-table-column>
            <el-table-column
                prop="avatar"
                label="头像">
                <template v-slot="scope">
                    <el-image style="width: 60px; height: 60px"
                              :src="scope.row.avatar"
                              fit="contain"
                              :preview-src-list="avatarUrls">
                    </el-image>
                </template>
            </el-table-column>
            <el-table-column
                prop="type"
                :formatter="formatType"
                label="类型">
            </el-table-column>
            <el-table-column
                prop="gender"
                :formatter="formatGender"
                label="性别">
            </el-table-column>
            <el-table-column
                prop="corpName"
                label="所属公司">
            </el-table-column>
            <el-table-column
                prop="employeeName"
                label="负责人">
            </el-table-column>
            <el-table-column
                prop="status"
                :formatter="formatStatus"
                label="状态">
            </el-table-column>
            <el-table-column
                prop="corpTags"
                label="企业标签">
            </el-table-column>
            <el-table-column
                prop="personalTags"
                label="私人标签">
            </el-table-column>
            <el-table-column
                prop="addWay"
                :formatter="formatAddWay"
                label="添加方式">
            </el-table-column>
            <el-table-column
                prop="createTime"
                label="创建时间">
            </el-table-column>
            <el-table-column
                prop="updateTime"
                label="更新时间">
            </el-table-column>
            <el-table-column
                prop="syncTime"
                label="同步时间">
            </el-table-column>
            <el-table-column
                label="操作"
                fixed="right"
                align="center"
                width="80px">
                <template v-slot="scope">
                    <div>
                        <el-button @click="onRefresh(scope.row)" type="text" size="small">刷新</el-button>
                        <el-button @click="onProfile(scope.row)" type="text" size="small">画像</el-button>
                    </div>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
            background
            small
            :hide-on-single-page="true"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="condition.page"
            :page-sizes="[10, 20, 30, 40, 50, 100]"
            :page-size.sync="condition.rows"
            layout="sizes, prev, pager, next"
            :total.sync="condition.total">
        </el-pagination>
        <el-drawer ref="drawer" direction="rtl" title="完善客户画像" width="30%"
                   :visible.sync="addOrUpdateDialogVisible">
            <el-form :model="addOrUpdateForm" label-width="120px" size="small">
                <el-form-item label="手机号">
                    <el-input v-model="addOrUpdateForm.mobileNo" placeholder="手机号"></el-input>
                </el-form-item>
                <el-form-item label="称呼">
                    <el-input v-model="addOrUpdateForm.nickname" placeholder="称呼"></el-input>
                </el-form-item>
                <el-form-item label="生日">
                    <el-date-picker
                        v-model="addOrUpdateForm.birthday"
                        type="date"
                        placeholder="生日"
                        value-format="yyyy-MM-dd"
                        align="right">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="年龄">
                    <el-select v-model="addOrUpdateForm.age"
                               placeholder="年龄">
                        <el-option
                            v-for="item in ageOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="级别">
                    <el-select v-model="addOrUpdateForm.level"
                               placeholder="级别">
                        <el-option
                            v-for="item in levelOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="职业">
                    <el-select v-model="addOrUpdateForm.position"
                               placeholder="职业">
                        <el-option
                            v-for="item in positionOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="性别">
                    <el-select v-model="addOrUpdateForm.gender"
                               placeholder="性别">
                        <el-option
                            v-for="item in genderOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="个人口味">
                    <el-input v-model="addOrUpdateForm.flavour" placeholder="个人口味" type="textarea"></el-input>
                </el-form-item>
            </el-form>
            <div class="drawer-footer">
                <el-button class="drawer-footer-button" @click="addOrUpdateDialogVisible = false" size="small">取 消</el-button>
                <el-button class="drawer-footer-button" @click="addOrUpdateConfirm" type="primary" size="small">确 定</el-button>
            </div>
        </el-drawer>
    </div>
</template>

<script>
import {
    addWorkCustomer,
    deleteWorkCustomer,
    getWorkCorpByPage,
    getWorkCustomerByPage,
    getWorkCustomerProfileByExternalUserid,
    refreshWorkCustomer,
    syncWorkCustomer,
    updateWorkCustomer,
    updateWorkCustomerProfile
} from '@/api/api'

export default {
    name: "WorkCustomer",
    data() {
        return {
            // 分页搜索条件
            condition: {
                page: 1,
                rows: 10,
                total: 0,
                search: {}
            },
            // 表格loading标志
            loading: true,
            // 表格数据
            tableData: [],
            // 新增或者编辑对话框显示
            addOrUpdateDialogVisible: false,
            // 标题
            addOrUpdateDialogTitle: '新增',
            // 新增或者编辑对话框表单
            addOrUpdateForm: {},
            // 选中行
            selectedRow: {},
            // 公司信息
            corps: [],
            // 同步loading
            syncLoading: false,
            // 头像URL列表
            avatarUrls: [],

            ageOptions: this.CONST.age_options,
            levelOptions: this.CONST.level_options,
            positionOptions: this.CONST.position_options,
            genderOptions: this.CONST.gender_options,
        }
    },
    // 这里定义需要父组件传过来的东西
    props: {
        size: {
            type: String,
            default: 'small'
        },
        mode: {
            type: String,
            default: 'list'
        },
        workCorpId: String
    },
    watch: {
        workCorpId: function (val, oldVal) {
            this.condition.search.workCorpId = val;
        }
    },
    methods: {
        // 这里可以单独设置每一行的样式
        tableRowClassName({row, rowIndex}) {
            return '';
        },
        // 设置某个单元格的样式
        cellStyle({row, column, rowIndex, columnIndex}) {
            if (column.label == '类型') {
                if (row.type == '1') {
                    return "color: #57ac6e"
                } else {
                    return "color: #e59c2d"
                }
            }
        },
        handleSizeChange(val) {
            this.getData();
        },
        handleCurrentChange(val) {
            this.getData();
        },
        // 格式布尔值
        formatBoolean: function (row, column, cellValue) {
            if (cellValue) {
                return "是";
            } else {
                return "否";
            }
        },
        formatStatus: function (row, column, cellValue) {
            if (cellValue == 'DELETED') {
                return "主动删除";
            } else if (cellValue == 'NORMAL') {
                return "正常";
            } else if (cellValue == 'BY_DELETED') {
                return "被删除";
            } else {
                return "未知";
            }
        },
        formatType: function (row, column, cellValue) {
            if (cellValue == '1') {
                return "微信用户";
            } else if (cellValue == '2') {
                return "企业用户";
            } else {
                return "未知";
            }
        },
        formatGender: function (row, column, cellValue) {
            if (cellValue == '0') {
                return "未知";
            } else if (cellValue == '1') {
                return "男性";
            } else if (cellValue == '2') {
                return "女性";
            } else {
               return "未知";
            }
        },
        formatAddWay: function (row, column, cellValue) {
            if (cellValue == '0') {
                return "未知来源";
            } else if (cellValue == '1') {
                return "扫描二维码";
            } else if (cellValue == '2') {
                return "搜索手机号";
            } else if (cellValue == '3') {
                return "名片分享";
            } else if (cellValue == '4') {
                return "群聊";
            } else if (cellValue == '5') {
                return "手机通讯录";
            } else if (cellValue == '6') {
                return "微信联系人";
            } else if (cellValue == '8') {
                return "客服人员";
            } else if (cellValue == '9') {
                return "搜索邮箱";
            } else if (cellValue == '10') {
                return "视频号添加";
            } else {
                return "未知";
            }
        },
        showAddDialog: function () {
            this.addOrUpdateDialogTitle = '新增';
            this.addOrUpdateDialogVisible = true;
            this.addOrUpdateForm = {};
        },
        showUpdateDialog: function (row) {
            this.addOrUpdateDialogTitle = '编辑';
            this.addOrUpdateDialogVisible = true;
            this.selectedRow = row;
            // 深拷贝
            this.addOrUpdateForm = Object.assign({}, row);
        },
        reset: function () {
            this.$refs['searchForm'].resetFields();
        },
        exportExcel: function () {
            this.GLOBAL.exportExcel('#mainTable', '数据.xlsx');
        },
        add: function () {
            addWorkCustomer(this.addOrUpdateForm).then(data => {
                this.addOrUpdateDialogVisible = false;
                this.getData();
            });
        },
        update: function () {
            updateWorkCustomer(this.addOrUpdateForm).then(data => {
                this.addOrUpdateDialogVisible = false;
                this.getData();
            });
        },
        sync: function () {
            if (!this.condition.search.workCorpId) {
                this.$message({
                    type: 'error',
                    message: '请先选择企业!'
                });
                return;
            }
            this.$confirm('请确认是否同步, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.syncLoading = true;
                syncWorkCustomer({workCorpId: this.condition.search.workCorpId}).then(data => {
                    if (data.respCode == 1000) {
                        this.$message({
                            type: 'success',
                            message: '同步成功!'
                        });
                        this.getData();
                    }
                    this.syncLoading = false;
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消'
                });
            });
        },
        onProfile: function (row) {
            this.addOrUpdateForm = Object.assign({}, row);
            getWorkCustomerProfileByExternalUserid({'externalUserid': row.externalUserid}).then(data => {
                if (data.body) {
                    this.addOrUpdateForm = data.body;
                }
            })
            this.addOrUpdateDialogVisible = true;
        },
        onRefresh: function (row) {
            this.$confirm('请确认是否刷新, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                refreshWorkCustomer({id: row.id}).then(data => {
                    if (data.respCode == 1000) {
                        this.$message({
                            type: 'success',
                            message: '刷新成功!'
                        });
                        this.getData();
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消'
                });
            });
        },
        onDelete: function (row) {
            this.$confirm('请确认是否删除, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                deleteWorkCustomer({id: row.id}).then(data => {
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                    this.getData();
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消'
                });
            });
        },
        addOrUpdateConfirm: function () {
            updateWorkCustomerProfile(this.addOrUpdateForm).then(data => {
                if (data.respCode == 1000) {
                    this.$message({
                        type: 'success',
                        message: '更新成功!'
                    });
                    this.addOrUpdateDialogVisible = false;
                    this.getData();
                }
            });
        },
        // 获取公司列表
        getCorps: function () {
            let condition = {
                page: 1,
                rows: 100,
                search: {}
            };
            getWorkCorpByPage(condition).then(data => {
                this.corps = data.body.rows;
            });
        },
        // 获取表格数据
        getData: function () {
            if (this.workCorpId) {
                this.condition.search.workCorpId = this.workCorpId;
            }
            this.loading = true;
            getWorkCustomerByPage(this.condition).then(data => {
                this.tableData = data.body.rows;
                this.condition.total = data.body.total;
                this.tableData.forEach((item, index, arr) => {
                    this.avatarUrls.push(item.avatar);
                })
                this.loading = false;
            });
            this.getCorps();
        },
    },
    created() {
        this.getData();
    },
}
</script>

<style scoped>
.el-input {
    width: 150px !important;
}

.el-select {
    width: 150px !important;
}
</style>
